<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
    <style type="text/css">
        .description-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container" id="app" v-cloak>
        <div class="row">
            <div class="col-xs-offset-1 col-xs-10">
            	<div class="panel panel-default">
                	<div class="panel-heading">
                    	<h3 class="panel-title"><b>实例教程</b></h3>
                	</div>
                	<div class="panel-body row">
                		<div class="col-md-4 col-xs-6" v-for="example in examples" style="padding: 10px 20px 0 20px;">
                            <a v-bind:href="'/examples/'+example.id" class="btn-block well" style="padding: 0 5px 0 5px;">
                                <h4><b v-text="example.title"></b></h4>
                                <p v-text="example.description" class="description-text"></p>
                            </a>
                        </div>
                	</div>
            	</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var examples;
    myAjax({
    	type: 'get',
    	url: '/examples',
    	async: false,
    	success: function(data) {examples=data}
    });
    
    new Vue({
        el: "#app",
        data: {
        	examples: examples
        }
    });
</script>
</html>